(()=>{

    console.log( 'custom : ' , window.name );

    let loadListener = {
        handleEvent(e){

            // $ 是在 utils.js 中绑定到 window 的一个函数
            // 当 .first 被点击时就调用 参数对应的监听器的 handleEvent 函数
            $( '.first' ).click({ 
                handleEvent(e){

                    // 选中 input 元素并从其中获取输入内容
                    let value = $('input').content() ;

                    let method = 'get' ;
                    let url = `http://localhost:8080/hello?username=${value}` ;
                    let handler = {
                        handleEvent(e){
                            let $http = e.target ;
                            if( $http.readyState === $http.DONE ) {
                                //let result = document.querySelector( '.result' );
                                //result.innerHTML = $http.response ;
                                // 选中 .result 元素并为其设置内容
                                $( '.result' ).content( $http.response );
                            }
                        }
                    }
                    async( method , url , handler );
                }
            });

            // 当 .second 被点击时就调用 参数对应的监听器的 handleEvent 函数
            $( '.second' ).click({ 
                handleEvent(e){
                    let method = 'post' ;
                    let url = 'http://localhost:8080/hello' ;
                    // 监听 $http.readyState 的改变事件
                    let handler = {
                        handleEvent(e){
                            let $http = e.target ;
                            if( $http.readyState === $http.DONE ) {
                                $( '.result' ).content( $http.response );
                            }
                        }
                    }
                    let params = `username=${ $('input').content() }`;
                    async( method , url , handler , params );
                }
            });

            // 当 .third 被点击时就调用 参数对应的监听器的 handleEvent 函数
            $( '.third' ).click({ 
                handleEvent(e){
                    let method = 'put' ;
                    let url = 'http://localhost:8080/hello' ;
                    // 监听 $http.readyState 的改变事件
                    let handler = {
                        handleEvent(e){
                            let $http = e.target ;
                            if( $http.readyState === $http.DONE ) {
                                $( '.result' ).content( $http.response );
                            }
                        }
                    }
                    let params = `username=${ $('input').content() }`;
                    async( method , url , handler , params );
                }
            });


            // 当 .fourth 被点击时就调用 参数对应的监听器的 handleEvent 函数
            $( '.fourth' ).click({ 
                handleEvent(e){

                    let queryString = `username=${ $('input').content() }`;

                    let method = 'delete' ;
                    let url = `http://localhost:8080/hello?${ queryString }` ;
                    // 监听 $http.readyState 的改变事件
                    let handler = {
                        handleEvent(e){
                            let $http = e.target ;
                            if( $http.readyState === $http.DONE ) {
                                $( '.result' ).content( $http.response );
                            }
                        }
                    }
                    async( method , url , handler );
                }
            });

            
            // 当 .second 被点击时就调用 参数对应的监听器的 handleEvent 函数
            $( '.fifth' ).click({ 
                handleEvent(e){

                    let queryString = `username=${ $('input').content() }`;

                    let method = 'head' ;
                    let url = `http://localhost:8080/hello?${ queryString }` ;
                    // 监听 $http.readyState 的改变事件
                    let handler = {
                        handleEvent(e){
                            let $http = e.target ;
                            console.log( 'readyState: ' , $http.readyState);
                            if( $http.readyState === $http.DONE ) {
                                let headers = $http.getAllResponseHeaders() ;
                                console.log( '--- headers ---' );
                                console.log( headers  );
                                console.log( typeof headers );
                                console.log( 'content-type: ' , $http.getResponseHeader( 'content-type' ));
                                console.log( 'response: ' , $http.response );
                            }
                        }
                    }
                    async( method , url , handler );
                }
            });

        }
    }

    // 监听 window 对象的 load 事件 ( 当文档加载就绪时触发该事件 )
    window.addEventListener( 'load' , loadListener , false );

})();